<template>
  <div class="coaster-info">
    <el-card class="header-card">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.oJUAWDACmm_x-H-0GfBByAHaDQ?w=301&h=153&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="霸天虎过山车图片" class="header-img">
      <h1>霸天虎过山车</h1>
      <el-tag type="danger" class="tag">勇敢刺激</el-tag>
      <el-tag type="info" class="limit">限身高132厘米以上</el-tag>
    </el-card>
    <el-card class="intro-card">
      <h2>项目介绍</h2>
      <p>和汽车人一起，探寻能量晶体的奥秘！</p>
      <p>对于每一位特工而言，霸天虎过山车的任务将是一个千载难逢的机会！因为你将进入到利钻魔的体内，近距离观察能量晶体在其内部的运作情况！一定要小心行动，要知道任何一个错误的动作，都有可能唤醒这个巨大的机械生物，随即他那剃刀般的牙齿便会疯狂地旋转起来，撕碎一切！最后，请再次检查好你的装备，出发特工们！</p>
    </el-card>
    <el-card class="notice-card">
      <h2>注意事项</h2>
      <el-collapse :default-expanded-keys="['1']">
        <el-collapse-item title="有心脏病史或血压异常的游客不可体验此景点。" key="1"></el-collapse-item>
        <el-collapse-item title="有背部病史、颈部病史或类似身体病史的游客不可体验此景点。" key="2"></el-collapse-item>
        <el-collapse-item title="孕妇不可体验此景点。" key="3"></el-collapse-item>
        <el-collapse-item title="不推荐易受晕动病或眩晕影响的游客体验此景点。" key="4"></el-collapse-item>
        <el-collapse-item title="不推荐对频闪特效敏感的游客体验此景点。" key="5"></el-collapse-item>
        <el-collapse-item title="不推荐对烟雾特效敏感的游客体验此景点。" key="6"></el-collapse-item>
        <el-collapse-item title="身体部位有石膏固定的游客不可体验此景点。" key="7"></el-collapse-item>
        <el-collapse-item title="近期接受过手术或有可能因乘坐此游乐设施导致情况加重的游客不可体验此景点。" key="8"></el-collapse-item>
        <el-collapse-item title="为了避免因游乐设施的作用力造成伤害或脱落，义肢必须妥善固定。" key="9"></el-collapse-item>
        <el-collapse-item title="请寻求工作人员协助。身高低于132厘米的游客不可乘坐。" key="10"></el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CoasterInfo'
}
</script>

<style scoped>
.coaster-info {
  padding: 20px;
}

.header-card {
  text-align: center;
  color: black;
  padding: 20px;
}

.header-img {
  width: 100%;
  //max-width: 800px; /* 增加图片宽度 */
  max-height: 600px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

.tag {
  margin-right: 10px;
}

.intro-card,
.notice-card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.intro-card:hover,
.notice-card:hover {
  transform: translateY(-5px);
}

h2 {
  border-left: 5px solid #3498db;
  padding-left: 10px;
  margin-top: 0;
}

.el-collapse-item__header {
  font-weight: bold;
}

.el-collapse-item__content {
  padding: 15px;
}
</style>
